<template>
    <div class="app-container">
        <el-row :gutter="30">
            <el-col :span="5">
                <el-form>
                    <el-form-item label="选择考试">
                        <el-select v-model="examId" placeholder="请选择考试" @change="getExamTodayDataById"
                                   style="width: 80%" clearable>
                            <el-option v-for="item in exam_list" :key="item.id" :label="item.name" :value="item.id"
                                       :disabled="item.allotStatus==1">
                                {{ item.name }}({{ item.allotStatus == 1 ? '未' : '已' }}排站)
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-empty v-if="isEmpty(exam_data)" description="数据为空"/>
                <el-tabs v-else v-model="timeId" tab-position="left" style="margin-top: 10px">
                    <el-tab-pane v-for="(placeMap,timeIdd) in exam_data" :label="time_map[timeIdd].name" :name="timeIdd">
                        <div v-for="(placeLists,placeIdd) in placeMap" class="place_list__box">
                            <div class="place_list__box">
                                <el-descriptions :column="2" :colon="false" size="mini" direction="vertical">
                                    <template slot="title">
                                        <el-tag type="success">
                                            {{ place_map[placeIdd].placeName }}
                                        </el-tag>
                                    </template>
                                    <template slot="extra">
                                        <el-link type="danger" disabled>
                                            {{ placeLists.length }}
                                        </el-link>
                                    </template>
                                    <el-descriptions-item v-for="(userList,index) in placeLists">
                                        <el-badge v-if="connect_data[`${examId}-${timeId}-${placeIdd}-${index}`]['ctrl']" value="控制端连接" class="item">
                                            <el-button type="primary" plain @click="chooseExam(userList,placeIdd,index)" size="small"
                                                       :disabled="connect_data[`${examId}-${timeId}-${placeIdd}-${index}`]['show']">
                                                {{ place_map[placeIdd].placeName }}-{{ index + 1 }}
                                            </el-button>
                                        </el-badge>
                                        <el-badge v-else value="未连接" type="info" class="item">
                                            <el-button type="primary" plain @click="chooseExam(userList,placeIdd,index)" size="small"
                                                       :disabled="connect_data[`${examId}-${timeId}-${placeIdd}-${index}`]['show']">
                                                {{ place_map[placeIdd].placeName }}-{{ index + 1 }}
                                            </el-button>
                                        </el-badge>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="19">
                <!--考试信息展示屏 -->
                    <PLACE_VIEW_IN ref="place_view_in" id="place_in" style="box-shadow: 5px 12px 12px 5px rgba(0, 0, 0, 0.1)"/>
            </el-col>
        </el-row>
    </div>
</template>

<script>

import {
    get_exam_today_data_by_id
} from "@/api/score/score_ex_exam";
import PLACE_VIEW_IN from "./in_view.vue";
import {copyObj, isEmpty, isEmptyStr, parseObj, toJsonStr} from "@/utils/zzDouUtils/objUtil";
import ScaleBox from "vue2-scale-box";
//考试信息展示屏

export default {
    name: "place_view",
    components: {PLACE_VIEW_IN,ScaleBox},
    data() {
        return {
            exam_list: [],
            exam_data: null,
            connect_data: null,
            time_map: {},
            place_map: {},
            examId: null,
            timeId: null,
            placeId: null,
            index: null,
            in_exam: null,
            domain: process.env.VUE_APP_BASE_API,
            socket: null,
            notify_duration:1000,
        };
    },
    created() {
        this.initConnect();
    },
    methods: {
        isEmpty,
        /** 根据id获取考试今日的详情 */
        getExamTodayDataById(e) {
            if (e == null || isEmptyStr(e)) {
                this.exam_data = null;
                this.time_map = {};
                this.place_map = {};
                this.timeId = null;
                return;
            }
            this.examId = e;
            const request = {
                order: 'get_exam_today_data_by_id',
                examId: e
            }
            this.sendWebSocketMsg(toJsonStr(request));
        },
        /** 选择场地 */
        chooseExam(userList,placeId,index) {
            const request = {
                order: 'choose_exam',
                examId: this.examId,
                timeId: this.timeId,
                placeId: placeId,
                index: index,
            }
            this.$refs.place_view_in.placeId = placeId;
            this.placeId = placeId;
            this.index = index;
            this.sendWebSocketMsg(toJsonStr(request));
            //赋值给小窗口
            let obj;
            this.exam_list.forEach(ex=>{
                if (ex.id === this.examId){
                    obj = copyObj(ex);
                    return;
                }
            })
            obj.timeId = this.timeId;
            obj.index = index;
            obj.place = this.place_map[placeId];
            this.$refs.place_view_in.exam = obj;
        },
        initConnect() {
            this.socket = new WebSocket(`ws://${isEmptyStr(this.domain) ? window.location.host : this.domain}/score-exam-place?role=show`)
            // 监听 WebSocket 事件
            this.socket.addEventListener('open', event => {
                this.$notify.success({title: '成功', message: '连接成功',duration: this.notify_duration});
            })
            // 接收到实时数据
            this.socket.addEventListener('message', event => {
                this.listenMessage(event.data)
            })
            this.socket.addEventListener('close', event => {
                this.$notify.error({title: '错误', message: '与后端程序断开连接',duration: this.notify_duration});
            })
            this.socket.addEventListener('error', event => {
                this.$notify.error({title: '错误', message: '与后端程序通讯发生错误',duration: this.notify_duration});
            })
        },
        listenMessage(response) {
            let result = parseObj(response);
            if (result.code == '500') {
                this.$notify.error({title: '错误', message: result.msg,duration: this.notify_duration});
            }
            if (result.order  == 'today_exam_list'){
                this.exam_list = result.data;
                this.connect_data = result.connectData;
            }else if (result.order  == 'update_connect_data'){
                this.connect_data = result.data;
            } else if (result.order  == 'get_exam_today_data_by_id'){
                this.exam_data = result.data.data;
                this.time_map = result.data.timeMap;
                this.place_map = result.data.placeMap;
                this.timeId = Object.keys(this.time_map)[0];
            } else if (result.order.startsWith('instruct@')){//切换倒计时或计时
                this.updateInOrder(result.order.split('@')[1]);
            }else if (result.order == 'update_waiting_users' && result.request.examId == this.examId && result.request.timeId == this.timeId){
                this.$refs.place_view_in.user_list = result.data.userList[this.placeId+'-'+this.index].stus;
                this.$refs.place_view_in.peopleMap = result.data.peopleMap;
                this.$refs.place_view_in.sheetMap = result.data.sheetMap;
            }else if (result.order == 'choose_exam'){
                this.$refs.place_view_in.skillName = result.skill.name;
                this.$refs.place_view_in.sheetStr = result.sheet;
                this.$refs.place_view_in.nameShow = result.data.nameShow;
            }
        },
        updateInOrder(order){
            this.$refs.place_view_in.manageOrder(order);
        },
        sendWebSocketMsg(msg) {
            if (this.socket) this.socket.send(msg);
        },
        closeWebSocket() {
            if (this.socket != null) {
                this.socket.close();
                this.socket = null;
            }
        },
    },
    beforeDestroy() {
        this.closeWebSocket();
    }
};
</script>
<style>

</style>
